﻿@using GlobalResources
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Helpers
@model Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Models.EditDeviceRuleModel

@{
    ViewBag.Title = @Strings.DeviceRules;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<noscript>
    <div class="error_noscript">
        <h1 class="error_noscript__header">@Strings.NoscriptHeader</h1>
        <p>@Strings.NoscriptP1</p>
        <p>@Strings.NoscriptP2</p>
    </div>
</noscript>


<div class="content_outer content_outer--background_color content_grid">

    <div class="content_inner content_inner--inherit_max_width_no_margin">

        <div class="grid_container height_fixed">

            @*Datatables plugin for jQuery. www.datatables.net*@
            <table id="ruleTable" class="order-column">

                <thead>
                    <tr>
                        <th>@Strings.StatusHeader</th>
                        <th>@Strings.RuleIdHeader</th>
                        <th>@Strings.DeviceIdHeader</th>
                        <th>@Strings.DataFieldHeader</th>
                        <th>@Strings.OperatorHeader</th>
                        <th>@Strings.ThresholdHeader</th>
                        <th>@Strings.RuleOutputHeader</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>
        </div>

        <div class="details_grid_closed height_fixed button_details_grid">
            <h2 class="details_grid_closed__grid_subhead">@Strings.RulePropertiesPaneLabel</h2>
        </div>

        <div class="details_grid height_fixed">

            <h2 class="details_grid__grid_subhead button_details_grid">@Strings.Properties</h2>

            <div id="details_grid_container">
                <div class="details_grid__no_selection">
                    @Strings.NoRuleSelectedLabel
                </div>
            </div>

            <div id="loadingElement" class="loader_container loader_container_details">
                <div class="loader_container__loader"></div>
            </div>

        </div>

    </div>

</div>


<script>
    "use strict";

    var resources = {
        retry: '@Html.JavaScriptString(Strings.Retry)',
        serviceUnavailable: '@Html.JavaScriptString(Strings.ServiceUnavailable)',
        unableToRetrieveRuleFromService: '@Html.JavaScriptString(Strings.UnableToRetrieveRuleFromService)',
        disabled: '@Html.JavaScriptString(Strings.Disabled)',
        enabled: '@Html.JavaScriptString(Strings.Enabled)',
        failedToRetrieveRules: '@Html.JavaScriptString(Strings.FailedToRetrieveRules)',
        noRuleSelected: '@Html.JavaScriptString(Strings.NoRuleSelectedLabel)',
        ruleUpdateError: '@Html.JavaScriptString(Strings.RuleUpdateError)',
        rulesList: '@Html.JavaScriptString(Strings.Rules)',
        nextPage: '@Html.JavaScriptString(Strings.Next)',
        previousPage: '@Html.JavaScriptString(Strings.Previous)'
    };
</script>

<script src="~/Scripts/jquery-datatables-api-extensions.js"></script>
<script src="~/Scripts/Views/DeviceRules/DeviceRulesIndex.js?ver=@Constants.JSVersion"></script>
<script src="~/Scripts/Views/DeviceRules/DeviceRuleProperties.js?ver=@Constants.JSVersion"></script>